INF385T UX Prototyping
HW Instructions
Spring 2023

Ninety percent of your grade comes from the following work. The other ten percent consists of peer reviews, described in the syllabus. Also note that the syllabus describes the attendance policy. That can negatively impact the grade you earn.

Milestones (35 percent of your grade)

Overview

For seven of the weeks we meet, you will submit a milestone in Canvas. Note that all work is to be submitted via Canvas. Don’t send me any attachments in emails or I will deduct points from the relevant score!

I will assign seven groups of five.

You will complete a prototype milestone by Monday at 9pm via Canvas, via a plain text document (not a word processing document) containing the URL of the page for the current milestone on your group website. That website will contain (A) text describing your current milestone and (B) a link to your actually prototype, for example on Figma or Framer. Only one person from your group will submit the plain text document to Canvas, and it will be named with that person’s initials followed by dot txt. In other words, if I were to make such a submission, it would be called mm.txt and would not be in Word or pdf format but rather plain text, as can be generated in any text editor such as pico or textedit. There should be only one line in the file, and that line should contain only one URL, so that I can automatically parse all the submitted files.

That week’s evaluating group will then review the submissions and come to class prepared to present a ranked top 3 list that they find the most compelling.

The week’s evaluating group will provide two documents via Canvas, (1) the slideshow presentation (in pdf format) of the top three submissions, and (2) a series of seven pdfs, one evaluating each group. The first document will be named milestoneNfeedback.pdf and the series of group feedback documents will be named milestoneNgroupMfeedback.pdf. Any deviation of these names slows down my grading scripts and results in points deducted, including the first time you do it.

Details

The milestones are mostly connected to each other, with the eventual goal of a portfolio piece.

Milestone 1 — accessibility

Unlike most milestones, for this one you will evaluate a website for accessibility. The purpose of this is to awaken you to the need for accessibility before you start creating your own prototypes so that you bake accessibility into your prototypes rather than having to scramble to add it as an afterthought.

You will run an accessibility check on a website of your choosing. You can use this ATAG report tool to help you https://www.w3.org/WAI/atag/report-tool/principle/1

1. Evaluate three pages of any website using at least 3 WCAG 2.1 criteria on each page, e.g., 1.4.11 non text contrast.
2. Let us know if the page passes and why it passed.
3. Create screens for how you would improve its accessibility and justify your solution.
4. Deliver (a) your analysis as a pdf report, and (b) 3 mid-fi wireframes, one for each page, of your improved solution. The report should be a pdf submitted to Canvas, while the wireframes should be a Figma or Framer or XD (or other) prototype. Submit a plain text file with a .txt extension including ONLY the link to the prototype. Make sure the instructor can view the prototype. Afterward, you should add the pdf and the link to the milestone 1 page of your group’s website.

FAQ

What does mid-fi mean in this context? Focus on color, typography, and layout, without consideration of animation or navigation unless the accessibility improvements require them.

For each page we evaluate, can we use the same WCAG criteria on each page? NO!

What happens if our website is perfect and is completely accessible? Try another website.

What tools should we use? Use any tools you want, such as WAVE, Andi, Contrast, Manual, or others.

Are we limited to AA or A criteria? Use whichever you want for each page.

Can you give us an example of a fantastic job on this milestone? Yes, look in Canvas at the files m1exampleReport.pdf and m1examplePrototype.txt.

Other tips

1. Provide the reader context and your reasoning for your evaluation.
2. It would be valuable to see your justification and logic.
3. Refer back to the original issue when presenting your solution.
4. Consider inclusive design.
5. Visual impairment errors that fail WCAG are comparatively easy to fix.

Milestone 2 — using inspiration

1. Stare at a photograph of the painting Still You Bloom in this Land of No Gardens for at least ten minutes (this will help you to see detail and extrapolate information about what you see)
2. Create a prototype of a digital artifact to satisfy some need of one of the two people in the painting
3. Submit the prototype by a week from Monday evening at 9PM

Milestone 3 — using story mapping

• Level of detail for each step within the story map
• Coverage of multiple users and understanding of users
• Thoughtful solution (rationalized by research, users, and problem statement)
• The team’s understanding of story maps

Milestone 4 — aesthetics

Create a prototype with detailed attention to color, typography, iconography, layout, and navigation. Include a design system along with your prototype. The design system can be as simple as a spec sheet showing a color palette, typefaces, icons, and grid layout. If you google design system you will find that many more elaborate solutions are common.

Milestone 5 — microinteractions

Add microinteractions to your milestone 4 prototype.

Milestone 6 — testing

• Perform usability tests on relevant users face-to-face and on UserTesting.com.
• Each group member should conduct one face-to-face test and one on UserTesting.com.
• Submit a pdf report with your methodology, insights, and potential changes you would make to your prototype.
• Include your testing materials, such as scripts, forms, and so on in appendices to the report.

Why do this?

• It encourages you to find participants matching your target audience.
• It improves your interviewing skills by conducting more than one test total per group member.
• It identifies valuable insights that can be translated into action items for the next prototype.
• It helps you develop a method for user testing.

What are lessons learned from previous submissions that we should incorporate?

• You should discuss the target audience and address your success level in finding relevant participants.
• Images of the prototype with annotations to help explain recommendations should be included in the report.
• The should be “show your work” type discussions of your analysis and insights.
• There should be quotes from your participants to support your insights.
• Discuss errors or issues you encountered during testing

More evaluation criteria

Quality of insights

• Are the insights practical?
• Do the insights add value or solve problems?
• Are the insights detailed and have specific rationale?

Easy to understand

• How well were the insights explained
• How well were findings summarized in digestible points?
• How well were images of the prototype used to explain the process and findings?
• Was the report understandable to a person without exposure to the prototype?

Method

• How well did you understand the chosen method(s)?
• How well did you explain your process?
• How good was your execution?
• Did the chosen method(s) make sense?
• Did the chosen participants make sense?

Milestone 7 — improvements from tests

Improve your prototype based on the results of milestone 6 and write a pdf report explaining what you did.

Start by assigning a severity rating to each issue mentioned by your participants in milestone 6.

1. Major issue
2. Moderate issue
3. Minor issue
4. Not an issue

Second, decide on which changes to actually make. Document your decision-making process in your report.

Third, actually make the changes in Figma, Framer, XD or a similar tool.

Pay special attention to

• Level of review and analysis of previous work to identify opportunities
• How you rate your severity levels
• Thoughtfulness of implemented changes
• Clarity in communication to someone reviewing your work

For evaluators: Evaluating group work

• Say both good and bad
• Be as detailed as you can be
• Give special attention to thoughtfulness and obvious gaps in thinking about the problem

For evaluators: Ranking the top three

Your top 3 should be based on what you find out from comparing the groups. You can’t establish criteria in advance. Make a list of things they did and didn’t do (that further reflection convinced you they should have done) and compare the groups on those.

You should also take into account the three things I’ve mentioned before: (1) solving the right problem, (2) thoughtfulness of solution, and (3) craft of presentation.

Craft of presentation can be easily broken down into color, typography, layout, navigation, and animation, but the other two are harder to break down.

The first one will almost take care of itself if you have given a very specific deliverable. They won’t have much room to deviate. The second one will be the hard one for you. How do you evaluate thoughtfulness? It requires a lot of unstructured thought on your end. The third one can easily be broken down into its elements.

Sketches (Lofi Prototypes) (30 percent of your grade)

Overview

You will keep a 5×8 inch (approximately) sketchbook throughout the semester. This may be a Moleskine Cahier or similarly sized sketchbook. The size is important. A significantly larger or smaller sketchbook invites you to sketch differently because of the dimensions of the adult human hand and pencils. You will submit three sketches for each Sketches exercise: one that will be specified in class, and two examples of good design that you find in the wild. You will submit photographs of these three sketches to Canvas. The sketches for the first assignment will be named sketch1a.png, sketch1b.png, and sketch1c.png. For the remaining assignments you will increment the numeral. Any deviation from of these names slows down my grading scripts and results in points deducted, including the first time you do it.

Details

Good design sketches

For each Sketch assignment, you will include two sketches of good design in addition to the assignment described below. These are designs you find that have been designed by humans. Trees or other living things or mountains or rock formations are not acceptable. Your designs will typically be physical or digital products designed by human designers.

Sketch 1: Graphical self intro

Make a sketch that introduces you as a UX design student. If you are not a UX design student, introduce that aspect of yourself that was motivated to take a UX prototyping course. This sketch could be a self-portrait, a narrative of your journey to your present location, a collage of things that are important to you as a UX design student, or an abstract image that may convey that you are hard to describe or wish to remain a mystery to your classmates. It can be anything as long as it is a sketch that you spend enough time on to improve your sketching skill.

The objective of this assignment is to communicate yourself to your classmates.

I want you to express yourselves as fully as possible. If I give you a list of parameters, I’m afraid that the graphical self intros will all look alike. It would be as if I told you how to dress and how to cut your hair so that you would all look uniform. That might please me if I were running an army, but that is not a good way to start a graduate design class. Learning to follow instructions teaches you to follow instructions. Is that really what you want from a graduate design class?

Of course, there are always constraints in design. In fact, it has been said that design is all about constraints. But don’t ask for more constraints than are already imposed upon you. For this assignment, I want to make a nice pdf of all the submissions. That gives you an important constraint to make it easy to view. You’ll want to use really good lighting to get the best picture of the page you draw. That should be constraint enough. (Some people really struggle to meet that constraint despite the widespread presence of sunlight!) Another constraint is that the picture should be in focus. (If you can’t figure out a way to focus a picture, or don’t care enough to do so when you’re given a week to do it, I question your commitment.) That is constraint enough. Whether it’s landscape or portrait is really up to your creativity and how you want to lay out the elements you draw. Whether you illustrate yourself, or objects meaningful to you, or words that describe you, or something completely abstract that puts your feelings in the foreground, or something that I haven’t imagined yet—all that is completely up to you. You should be glad of this freedom and use it to make something you really like!

Sketch 2: Record interaction

Spend a total of 25 minutes interacting with an app and documenting your experience, using mainly a series of about three dozen to four dozen pictures, each about 2 cm to 3 cm square. The interaction itself may last only a minute of the 25 minutes or perhaps it is used intermittently during the 25 minutes. Employ very few words. Pictures should tell the story. Make it clear how the app display changes and what your interactions with the app are. Be specific. I should not have to wonder what the consequence was of pushing a particular button. I’m not looking for impressionism as much as something that the developer of the app could learn from. Only include enough about the surroundings to clarify the interaction. In other words, if it is a jogging monitor app, I don’t need to see a bunch of pictures of a person running around. One at the start and end are probably enough unless you have issues caused by the surroundings.

Fragment of one student’s solution

One strategy might be to start with a screen recording and then to determine which frames are critical to understanding, then to draw only those frames and use drawing skill to make them come alive so that we see action rather than stasis.

The objective is to learn to describe interaction. Notice how difficult it is to isolate the interaction from its surroundings. Try to disambiguate what you are communicating in each picture. Plan the narrative.

Sketch 3: Corporate directory navigator

For this exercise, assume your design will be accessed on a QVGA (320 × 240 pixel) phone. There may be a numeric keypad and a five way rocker button, but not much else. (This is a description of what is commonly called a feature phone, a simple precursor to today’s smartphones.)

Bear in mind that you will need several panels to describe the following system. They should all be small and low resolution.

Design a system to navigate a corporate hierarchical directory. Plan it for Globocide Corp., an imaginary company, which has 40,000 employees worldwide. There are seven main hierarchies of unequal depth (such as finance, marketing, accounting, operations, and IT) and we’d like to be able to traverse them. We’d like to be able to find the path from any given employee to the CEO. We’d like to get a picture of an employee’s surroundings. How dense is the region around an employee? How many are above or below a given employee? Who are the peers of an employee? We’d also like to get a picture of a division in comparison with its peers. How many are in the division? How tall is its hierarchy? How does its shape differ from peer divisions?

Your design should be shown in a series of sketches that work at QVGA resolution and show interactions and their effects.

The objective for this exercise is to understand that the medium, a tiny square, is not suited to the message, a large outwardly fanning tree. Learn some characteristics of one of the two most frequently occurring information structures (trees). Think about users in identifiable groups. Think about user characteristics such as the number of users, frequency of use, purpose of use, nearness to other users, and power and influence. Think about the displays on smart watches, which are similarly constrained in size.

Sketch 4: User-centered music player

Visit the Play Store or the App Store and look at reviews of music players. Design a niche music player that fulfills some (not all) of the needs you find in these reviews. Try to refrain from making it look like the myriad nearly identical players available in these two stores.

Sketch 5: Auto collision center assistant

Automobile collision centers have to buy body parts for the cars they repair. In my personal experience, they sometimes let the customer see the desktop application they use to shop for parts. Design such an application with this in mind. It should allow the user to compare parts. For example, the OEM (original equipment manufacturer) prices parts above the average for aftermarket parts but offers a stronger warranty. Keep in mind that a customer may be looking over the user’s shoulder while using the application.

Sketch 6: UX for a thousand story elevator

Design the user experience for an elevator that can stop on any of a thousand floors. Bear in mind that this is a single elevator that can stop on any floor from ground to top. Bear in mind that there has never been a building more than a tenth the size of this one, so you would do well to completely rethink the concept of an elevator. You will receive little credit for a design that mimics existing elevators. Also bear in mind that a journey from the bottom to the top uninterrupted by stops would take at least half an hour.

You may take inspiration from the only building in history that was designed at such a size. This was the X-Seed 4000, a concept conceived by Tokyo city planners and elaborated by the Taisei Corporation in the 1990s. They envisioned this building being the size and shape of Mount Fujiyama and housing an auxiliary city to Tokyo of over a million people.

Following is an illustration of a comparison between the proposed design and the Burj Khalifa (at that time called the Burj Dubai), the world’s tallest building.

Final Exam - Reflection (25 percent of your grade)

The final exam will be a take-home reflection document, delivered in pdf format, not Word or any other format. Disregarding this instruction will slow down my grading and result in a deduction of several points.

The exam will test the learning objective: be able to articulately describe and evaluate tools and techniques for creating lofi and hifi prototypes by five questions, each worth five points, such as “Describe how you used story mapping in your project and tell what else you could have done with story mapping that you didn’t do.” The exact five questions will be disseminated on the last class day and the exam will be due when our official exam period would occur, which will be announced.